<template>
  <div class="shoppingContainer">
    <van-card v-for="item in list" :key="item.id" :origin-price="item.originPrice" :price="item.price" :desc="item.text" :title="item.name" :thumb="item.image" @click="showDetail(item)">
      <template #tags>
        <van-tag class="tag" color="#754dec" text-color="#fff">酒水</van-tag>
      </template>
      <template #footer>
        <van-button size="mini" @click.stop="addCart(item)">加入购入车</van-button>
        <van-button size="mini" @click.stop="createOrder(item)">立即购买</van-button>
      </template>
      <template #num>
        <van-stepper v-model="item.count" :min="1" :max="99" integer disable-input @click.stop />
      </template>
    </van-card>
    <div style="height:300px" />
  </div>
</template>

<script>
import { showDialog } from 'vant';
export default {
  name: 'shopping',
  data() {
    return {
      list: [],
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const data = await post('/list/goods', { pageNo: 0, pageSize: 10 });
      if (data.success) {
        this.list = data.result.list;
      }
    },
    async addCart(item) {
      const data = await post('/create/cart', {
        goodsId: item.id,
        count: item.count,
      });
      if (!data.success) {
        return showDialog({ message: data.message });
      }
      app.$bus.emit('/cart/refreshList');
      showDialog({ message: '加入购入车成功' });
    },
    async createOrder(item) {
      app.push('/createOrder', item);
    },
    // 这个参数必须选择谁就传谁过来
    showDetail(item) {
      this.$router.push({ path: '/detail', query: { id: item.id } });
    },
  }
}
</script>

<style scoped lang="less">
.shoppingContainer {
  width: 375px;
  padding-bottom: 200px;
}
.tag {
  padding: 2px 6px;
  border-radius: 4px;
  margin: 0 4px;
  color: #754dec;
}
</style>
